<template>
  <div class="scroll-view"
  >

    <ul ref="list_view"
        class="es-portrait-list-view-css">
      <li v-for="(sentence,index) in sentenceList" :key="index"
          :focusable="true"
          :enableFocusBorder="true"
          :focusScale="1.1"
          :ref="'es_li_item_' + index"
      >
          <text-view
            class="text-view" gravity="center">{{ sentence }}</text-view>
      </li>
    </ul>
  </div>
</template>
<script>

import {ESPage,ESToast,ESKeyEvent,ESFocusManager} from "@extscreen/es-core";
import {ESAndroidAudioPlayerMixin, ESAndroidAudioPlayerModule} from '@extscreen/es-android-audio-player';
import {
  ES_PLAYER_STATE_BUFFER_END,
  ES_PLAYER_STATE_BUFFER_START,
  ES_PLAYER_STATE_ERROR,
  ES_PLAYER_STATE_PAUSED,
  ES_PLAYER_STATE_PLAYBACK_COMPLETED,
  ES_PLAYER_STATE_PREPARED,
  ES_PLAYER_STATE_RESUMED,
  ES_PLAYER_STATE_SEEK_COMPLETED,
  ES_PLAYER_STATE_SEEK_START,
  ES_PLAYER_STATE_STOP
} from '@extscreen/es-player';
import Vue from "vue";
export default {
  name: 'scrollPlay',
  mixins: [ESAndroidAudioPlayerMixin,
    ESKeyEvent],
  data() {
    return {
      sentences: '',
      currentIdx:0,
    };
  },
  methods: {
    init() {
      ESAndroidAudioPlayerModule.init();
    },
    play(){
      // this.$refs.list_view.scrollToIndex(0, this.currentIdx, false, 0, 0);
      Vue.Native.callUIFunction(this.$refs.list_view, 'requestChildFocus', [this.currentIdx]);
      //循环播放
      ESAndroidAudioPlayerModule.stop();
      let url = "http://qcloudcdn.a311.ottcn.com/data_center/audios/aganzhengzhuan/"+this.currentIdx+".mp3?t=1"
      ESAndroidAudioPlayerModule.play(url);
      this.currentIdx++

    },
    startDurationTimer() {
      this.stopDurationTimer()
      this.durationTimer = setInterval(() => {
        this.getDuration();
      }, 500);
    },
    stopDurationTimer() {
      clearInterval(this.durationTimer);
    },
    startProgressTimer() {
      this.stopProgressTimer()
      this.progressTimer = setInterval(() => {
        this.getCurrentPosition();
      }, 500);
    },
    stopProgressTimer() {
      clearInterval(this.progressTimer);
    },
    onPlayerStatusChanged(event) {
      switch (event.playerStatus) {
        case ES_PLAYER_STATE_PREPARED: {
          ESAndroidAudioPlayerModule.start();
          // this.startDurationTimer();
          // this.startProgressTimer();
          break;
        }
        case ES_PLAYER_STATE_PAUSED: {
          break;
        }
        case ES_PLAYER_STATE_STOP: {
          break;
        }
        case ES_PLAYER_STATE_PLAYBACK_COMPLETED: {
          // this.stopProgressTimer();
          // this.stopDurationTimer();
          this.play()
          break;
        }
        case ES_PLAYER_STATE_ERROR: {
          break;
        }
        case ES_PLAYER_STATE_RESUMED: {
          break;
        }
        case ES_PLAYER_STATE_BUFFER_START: {
          break;
        }
        case ES_PLAYER_STATE_BUFFER_END: {
          break;
        }
        case ES_PLAYER_STATE_SEEK_START: {
          break;
        }
        case ES_PLAYER_STATE_SEEK_COMPLETED: {
          break;
        }
      }
    },
    setSentences(sentences){
      this.sentences=sentences
    },
    scroll(){
      this.$refs.list_view.scrollToIndex(0, 3, false, 0, 0);
    },
    focus(){
      // ESFocusManager.requestFocus(this.$refs['list_view'])
      Vue.Native.callUIFunction(this.$refs.list_view, 'requestChildFocus', [1]);
ESToast.showToast('focus')

    }
  },
  components: {},
  computed:{
    sentenceList(){
      return this.sentences.split(/(?<=[\?!\.])\n/g)
    }
  },
  //按下
  onKeyDown(keyEvent) {
    // ESToast.showToast(keyEvent)
  },
  //抬起
  onKeyUp(keyEvent) {
    // ESToast.showToast(keyEvent)
  },
};
</script>
<style>

.text-view{
  width: 960px;
  height: 120px;
  color: white;
}
.scroll-view{
  background-color: rgb(146,168,209);
  width: 960px;
  height: 680px;
}
.es-portrait-list-view-css {
  height: 680px;
  align-items: center;
  justify-content: center;
}
</style>
